<template>
  <div class="realphotogroup">
    <div class="tit">
      <span class="goback" style="font-size: .2rem;font-weight: 700;">实时相机</span>
      <span style="font-size: .2rem;margin:0 .1rem;">></span>
      <span style="font-size: .2rem;font-weight: 700;">{{ card }}号相机</span>


      <el-date-picker style="width: 3.5rem;margin:0 .2rem;" @change="trandate" v-model="pst" type="daterange"
        range-separator="-" start-placeholder="请选择时间" end-placeholder="请选择时间">
      </el-date-picker>



      <div style="position: absolute;right: .2rem;" class="buttoRight">

        <el-checkbox @change="Selectall" v-model="checkAll">全选</el-checkbox>
        <span>已选：{{ num }}张</span>
        <el-button @click="everyDelete" type="success" size="small">确认删除</el-button>
        <el-button @click="goback" size="small">返回</el-button>
      </div>
    </div>
    <div class="contentbox">
      <div v-for="im in imglist" class="boxImg">
        <img v-if="im.type == 'img'" :src="im.url" alt="">
        <img v-if="im.type == 'img'" :data-src='im.url' class="bigbigbig" @click="open(im)"
          src="../../static/images/img/bigImg.png" alt="">
        <video v-if="im.type == 'video'" :src="im.url"></video>
        <img v-if="im.type == 'video'" class="bigbigbig" src="../../static/images/img/play.png" alt=""
          @click="openOne(im)">
        <el-checkbox :value="im.id" v-model="im.checked" class="checks" @change="Selectthis(im)"></el-checkbox>
      </div>
    </div>
    <el-dialog :visible.sync="bigImgVisible">
      <img :src="bigImgUrl" alt="" style="width: 90%">
    </el-dialog>
    <el-dialog :visible.sync="bigVideoVisible">
      <video :src="bigVideoUrl" style="width: 100%" controls></video>
    </el-dialog>
    <!--  <div class="box clearfix">
        <div class="smallbox" v-for="item in imglist" @click="goauthenticate(item)">
          <div>
            <div v-for="im in reverse(item.pathList)"><img :src="im" alt=""></div>
            <div class="txt">
              <span>{{item.number}}</span>
            </div>
          </div>
          <div>
            <span>组编号：{{item.groupNum}}</span>
            <br>
            <span>时间：{{item.shootTime}}</span>
          </div>
        </div>
      </div>-->

  </div>
</template>
<script>
import http from '../utils/http'
import api from '../utils/api'

export default {
  data() {
    return {
      card: 0,
      imglist: [],
      pst: "",
      idlist: [],
      t1: "",
      id: "",
      num: 0,
      everyFLag: 0,
      bigImgUrl: '',
      bigVideoUrl: '',
      checkAll: false,
      bigImgVisible: false,
      bigVideoVisible: false
    }
  },
  mounted() {

  },
  created() {
    this.card = this.$route.query.card;
    this.id = this.$route.query.id;
    this.t1 = this.$route.query.time;
    if (this.t1 != "") {

      this.pst = this.$route.query.time.split("~");
    } else {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate() - 1; // 日
      let day1 = `${year}-${month}-${day}`;

      this.pst = [day1, day1];
      this.t1 = day1 + "~" + day1
    }

    this.gettodayGrouping();
  },
  methods: {
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      this.nowDate = `${year}/${month}/${day}`;
    },
    reverse(t) {
      var a = [];
      t.forEach(e => {
        let iv = e.url.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          e.type = 'video'
        } else {

          e.type = 'img'
        }
      })
      return t;
    },

    goback() {
      this.$router.go(-1);
    },
    Selectall(e) {
      let vm = this;
      if (e) {
        vm.imglist.forEach((item, index) => {
          item.checked = true
        })
        vm.num = vm.imglist.length
      } else {
        vm.imglist.forEach((item, index) => {
          item.checked = false
        })

        vm.num = 0
      }
    },

    trandate(daterange) {
      if (this.pst != null) {
        var year = daterange[0].getFullYear();
        var month = daterange[0].getMonth() + 1;
        var date = daterange[0].getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        var t1 = year + "-" + month + "-" + date;
        var years = daterange[1].getFullYear();
        var months = daterange[1].getMonth() + 1;
        var dates = daterange[1].getDate();
        if (months >= 1 && months <= 9) {
          months = "0" + months;
        }
        if (dates >= 0 && dates <= 9) {
          dates = "0" + dates;
        }
        var t2 = years + "-" + months + "-" + dates;
        this.t1 = t1 + "~" + t2
      } else {
        this.t1 = "";
      }
      this.gettodayGrouping();
    },

    open(e) {
      this.bigImgVisible = true;
      this.bigImgUrl = e.url
    },
    openOne(e) {
      console.log(e)
      this.bigVideoVisible = true;
      this.bigVideoUrl = e.url
    },
    everyDelete() {
      let vm = this;
      let idlist = []
      if (vm.imglist.length == 0) {
        return
      }
      for (let i = 0; i < vm.imglist.length; i++) {
        if (vm.imglist[i].checked == true) {
          idlist.push(vm.imglist[i].id)
        }
      }
      (async function () {
        let res = await http.post(api.infrared.deleteImageList,
          idlist
        )
        if (res.data.code == '200') {
          vm.$message({
            message: '删除成功！',
            type: 'success'
          });
          vm.gettodayGrouping();
          vm.num = 0;
          vm.imglist = []
          vm.idlist = []
          vm.checkAll = false

        } else {
          vm.$message.error('删除失败，请重试！');
        }
      })()
    },
    Selectthis(item) {
      console.log(item);
      let vm = this
      if (item.checked) {
        vm.num = vm.num + 1
        if (vm.num == vm.everyFLag) {
          vm.checkAll = true
        }
      } else {
        vm.num = vm.num - 1
        if (vm.num != vm.everyFLag) {
          vm.checkAll = false
        }
      }
    },

    gettodayGrouping() {
      let vm = this, id = this.$route.query.id, startDate = '', endDate = '';
      if (vm.t1 != "") {
        startDate = vm.t1.split("~")[0]
        endDate = vm.t1.split("~")[1]
      }
      (async function () {
        let res = await http.get(api.infrared.getImageList + '?sampleId=' + id + "&startDate=" + startDate + "&endDate=" + endDate)
        if (res.data.code == '200') {
          let json = []
          res.data.data.forEach((item, index) => {
            json.push({
              url: item.accessorySrc,
              type: "",
              id: item.id,
              checked: false,
            })
          })
          vm.imglist = vm.$options.methods.reverse(json)
          vm.everyFLag = vm.imglist.length;
          // vm.getdata();
        }
      })()
    },

  }
}
</script>
<style scoped>
@import "../../static/css/realphotogroup.css";
</style>
<style>
.boxImg {
  width: 2rem;
  height: 2rem;
  display: inline-block !important;
  margin: 0.1rem;
  text-align: center;
  position: relative;
  border: 1px solid #ccc;
}

.boxImg:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.boxImg img:nth-child(1),
.boxImg video {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;

}

.boxImg video {
  border: 0;
  margin-left: 3%;
}

.boxImg .el-checkbox {
  position: absolute;
  bottom: 0;
  right: 0;
}

.contentbox {
  width: 17rem;
  height: 8rem;
  /*background: pink;*/
  overflow: auto;
}

.checks {
  width: 100%;
  height: 100%;
}

.checks .el-checkbox__input {
  position: absolute;
  bottom: 0;
  right: 0;
}

.el-checkbox__inner {
  border: 1px solid green;
}

.buttoRight>span,
.buttoRight .el-button,
.buttoRight .el-checkbox {
  margin-right: 0.2rem;
  vertical-align: bottom;
}

.el-checkbox .el-checkbox__input,
.el-checkbox .el-checkbox__label {
  vertical-align: middle;
}

.bigbigbig {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  z-index: 999;
}
</style>
